<template>
    <div class="com-cnt">
        <div class="xxk">
            <button class="btn_l dis">我的会员</button>
            <button class="btn_r">购卡记录</button>
        </div>

        <!--会员卡详情-->
        <div class="box">
            <img style="width:100%;font-size:14px" :src="tyCard" alt="办卡图片" class="kp">
            <h3 class="level">会员类型</h3>
            <div class="qh">
                <button class="" v-for="(item,index) in list" :class="{active:index == zxcard}" @click="cardClick(index)" :id="'qhid'+index">{{item.name}}</button>
                <!-- <button class="hy mf">{{msg.text1}}</button> -->
            </div>
            <main style="display:none;">
                <div class="main_top">

                    <h3>会员年限</h3>
                    <div class="btn">
                        <button class="" v-for="(item,index) in cardinfo" :class="{org:index == btnIndex}" @click="btnclick(index)">
                            <span style="font-size:.28rem;">{{item.period}}</span>
                            年
                        </button>
                    </div>
                    <h3 class="hyqy">会员收益</h3>
                    <div v-if="type != 1">
                        <p v-for="(item,pindex) in cardinfo" class="profit" v-show="pindex==btnIndex">每年共送{{item.taotalSource}}积分，平均每季度{{item.termSource}}积分</p>
                    </div>
                    <div v-else>
                        <p v-for="(item,pindex) in cardinfo" class="profit" v-show="pindex==btnIndex">每年共送{{item.taotalSource}}积分，购买会员卡当日赠送{{item.buySource}}积分，剩余积分将在接下来的每个月返回，平均每月{{item.termSource}}积分</p>
                    </div>

                </div>
                <div class="main_bottom">
                    <h3>会员权限</h3>
                    <p>1、会员可参加本公司举办的各类线上、线下体验活动及每年赠送积分享受消费体验。</p>
                    <p>2、会员可以在平台上充值现金，享受以1:10的比例以现金兑成换积分消费，同时也可将余留积分按10:1折现提款至本人银行卡，非会员只能以现金消费，不能兑换积分消费。</p>
                    <p style="margin-bottom: 78px;">3、会员卡期满后可以申请续卡继续享受会员服务，如会员申请退卡，本公司将在3个工作日内退还会员费至本人名下银行卡。</p>
                </div>
            </main>
            <div class="main">
                <div class="main_top">
                    <h3>会员年限</h3>
                    <div class="btn">
                        <button class="org" @click="btnclick(index)">
                            <span style="font-size:.28rem;">{{list[0].period}}</span>
                            年
                        </button>
                    </div>

                </div>
                <div class="main_bottom">
                    <h3>会员权限</h3>
                    <p>1、可参与本公司举办的各类线上、线下体验活动。</p>
                    <p>2、会员可享受平台商品的会员价。</p>
                    <p>3、会员可以在平台上充值现金，享受1:10的比例以现金兑换成积分消费，同时也可将余留积分按10:1的折现提款至本人银行卡，非会员只能以现金消费，无法兑换积分消费。</p>
                    <p style="margin-bottom: 78px;">4、会员卡到期后可申请续卡并继续享受会员服务。</p>
                </div>
            </div>
        </div>
        <!-- 购卡记录 -->
        <div class="gk_box" style="display:none;">
            <ul>
                <li v-for="app in dist">
                    <div class="left_img">
                        <img :src="app.picture" alt="" style="width:153px;height:91px;">
                    </div>
                    <div class="right_text">
                        <p class="one">{{app.name}} {{app.amount}}</p>
                        <p class="red two" v-if="app.status == 0">已付款</p>
                        <p class="red two" v-else-if="app.status == 1">已过期</p>
                        <p class="red two" v-else>已注销</p>
                        <p class="red thr">{{app.period}}年</p>
                        <p class="four">{{app.createTime}}</p>
                    </div>
                </li>
            </ul>
        </div>
        <!--立即支付-->
        <footer>
            <span>
                ￥
                <b class="mon">99</b>
            </span>
            <button class="ljzf" id="ljzf" @click="ljzfclick">立即支付</button>
        </footer>
    </div>
</template>

<script>
import { domain } from '@/assets/js/config'
import $ from 'jquery'
import { maskTips, maskCallback } from '@/assets/js/dom'
export default {
    name: 'membersdetailsPage',
    components: {
    },
    data() {
        return {
            postEo: {
                type: 0,
                amont: 0,
                type: 1,
                name: ''
            },
            msg: {
                text: '在线会员卡',
                text1: 'VIP会员卡',
            },
            isSHow: true,
            type: '',
            cardinfo: [],
            list: [{ period: 0 }],
            dist: [],
            btnIndex: 0,
            cardIndex: 0,
            zxcard: 0,
            useramount: '',
            cardpic: '',
            cardId: '11',
            card_Id: '',
            userToken: '',
            userlevel: '',
            memImg: require('../../assets/imgs/membership_card/hycard.png'),
            tyCard: require('../../assets/imgs/membership_card/tycard.png'),
            litte_hy: require('../../assets/imgs/gouka/l_hy.png'),
            litte_ty: require('../../assets/imgs/gouka/l_ty.png'),
        }
    },
    mounted() {
        // 顶部选项卡
        $('.xxk button').click(function () {
            var self = $(this)
            self.addClass('dis').siblings().removeClass('dis');
            var _this = $(this).text()
            if (_this == '我的会员') {
                $('.box').show();
                $('.gk_box').hide();
                $('footer').show();
            } else {
                $('.box').hide();
                $('.gk_box').show();
                $('footer').hide();
            }

        });

        var routerParams = '1'//this.$route.params.type
        var that = this;
        var card_type;

        that.type = routerParams
        console.log(routerParams)
        var userToken = localStorage.getItem("token") || '' //用户token值
        that.userToken = userToken
        maskCallback(function () {
            that.$router.push('/shiming')
        }, 'comp-mask-btnAleft-gotoshiming', 'comp-mask-btnAright')
        maskCallback(function () {
            that.$router.push('/recharge')
        }, 'comp-mask-btnAleft-gotofill', 'comp-mask-btnAright')
        maskCallback(function () {
            that.$router.push('/dzgl')
        }, 'comp-mask-btnAleft-buysucc', 'comp-mask-btnAright')
        // 卡列表数据
        $.ajax({
            url: domain + "/xshk/f/user/getCardLists?token=" + userToken,
            type: "get",
            dataType: "json",
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
            },
            success: function (data) {
                console.log(data)
                if (data.code === 0) {
                    that.list = data.data;
                    that.card_type = data.data[0].type;
                    that.cardId = data.data[0].id;
                    console.log(that.cardId)
                } else {
                    console.log(data.message);
                    that.$router.push('/login')
                }
            },
            error: function () {
                console.log("通信失败");
            }

        })

        //拿到展示数据
        $.ajax({
            url: domain + "/xshk/f/user/getCardDetailByType?token=" + userToken,
            data: { 'type': routerParams },
            type: "post",
            dataType: "json",
            xhrFields: { withCredentials: true },
            crossDomain: true,
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
            },
            success: function (data) {
                console.log(data)

                if (data.code === 0) {
                    that.cardinfo = data.data
                    that.cardpic = data.data[0].picture
                    // that.cardId = data.data[0].id
                    that.userlevel = data.data[0].name
                    that.useramount = data.data[0].amount
                    console.log(that.cardinfo)
                } else {
                    console.log("数据为空");
                }
            },
            error: function () {
                console.log("通信失败");
            }

        })

        // 购卡记录
        $.ajax({
            url: domain + "/xshk/f/card/buyCardInfo?token=" + userToken,
            type: "post",
            dataType: "json",
            xhrFields: { withCredentials: true },
            crossDomain: true,
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
            },
            success: function (data) {
                console.log(data);
                if (data.code == 200) {
                    that.dist = data.data;
                    console.log(that.dist)
                } else {
                    console.log('通信失败')
                }
            },
            error: function () {
                console.log("通信失败");
            }
        })

    },

    methods: {
        btnclick: function (index) {
            this.btnIndex = index;
            this.cardId = this.cardinfo[this.btnIndex].id
        },
        cardClick: function (index) {
            this.cardIndex = index;
            // this.cardId = this.list[this.cardIndex].id
            console.log(this.cardId, this.cardIndex)
            this.zxcard = index;
            this.card_type = this.list[this.zxcard].type;
            // 卡类型选项卡
            var _this = this
            if (index == 0) {
                $('.kp').attr('src', _this.tyCard);
                $('.main').show();
                $('main').hide();
                $('.mon').text(_this.list[index].amount)
                this.cardId = '11'
            } else if (index == 1) {
                $('.kp').attr('src', _this.memImg);
                $('main').show();
                $('.main').hide();
                $('.mon').text(_this.list[index].amount)
                this.cardId = '2'
            }

        },
        ljzfclick: function () {
            //立即支付
            var that = this
            $.ajax({
                url: domain + "/xshk/f/user/saveBuyCardOrder?token=" + that.userToken,
                data: { 'cardId': this.cardId },
                type: "post",
                dataType: "json",
                xhrFields: { withCredentials: true },
                crossDomain: true,
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                success: function (data) {
                    console.log(data)
                    console.log(this.cardId)
                    if (data.code === 102) {
                        console.log(data.data)
                        maskTips({ id: "buysucc", txt: data.message })
                        that.$router.push('/center')
                        maskTips({ id: "payfail" + new Date().getTime(), title: '温馨提示', btnCls: 'comp-mask-btnAleft-buysucc', btnTxt: '确认', btnTxt2: '取消', txt: '恭喜您办理成功，请填写收货地址领取实体卡' })
                    } else if (data.code === -2) {//104余额不足 -2未实名
                        console.log(data.message);
                        maskTips({ id: "payfail" + new Date().getTime(), title: '温馨提示', btnCls: 'comp-mask-btnAleft-gotoshiming', btnTxt: '确认', btnTxt2: '取消', txt: data.message })
                        that.$router.push('/userinfo')
                    } else if (data.code === 104) {
                        maskTips({ id: "payfail-104" + new Date().getTime(), title: '温馨提示', btnCls: 'comp-mask-btnAleft-gotofill', btnTxt: '确认', btnTxt2: '取消', txt: data.message })
                    } else {
                        console.log(data.message);
                        maskTips({ id: "payfail-2", txt: data.message })
                        that.$router.push('/center')
                    }
                },
                error: function () {
                    console.log("网络连接失败");
                }

            })
        }
    }
}
</script>

<style lang="stylus" scoped>
.com-cnt {
    width: 100%;
    height: 80%;

    .xxk {
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: row;

        .btn_l {
            height: 48px;
            flex: 1;
            border: none;
            outline: none;
            font-size: 13px;
            color: #999;
            font-family: 'PingFangSC-Regular';
            border-bottom: 1px solid #f0f0f0;
            border-right: 1px solid #f0f0f0;
            background: #fff;
        }

        .btn_r {
            height: 48px;
            flex: 1;
            border: none;
            outline: none;
            font-size: 13px;
            color: #999;
            font-family: 'PingFangSC-Regular';
            border-bottom: 1px solid #f0f0f0;
            background: #fff;
        }

        .dis {
            color: #8FC31F;
            border-bottom: 2px solid #8FC31F;
        }
    }

    .header {
        height: 0.92rem;
        text-align: center;
        background: #f9f9f9;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
    }

    .left {
        font-size: 0.28rem;
        position: absolute;
        left: 0.34rem;
        top: 0.36rem;
    }

    .title {
        font-size: 0.32rem;
        color: #333;
        line-height: 0.92rem;
    }

    /* 会员卡详情 */
    .box {
        padding: 0.2rem 0.3rem;
        box-sizing: border-box;

        .level {
            font-weight: 800;
            font-size: 0.3rem;
            line-height: 50px;
            color: #333;
            padding: 0 0.4rem;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
        }

        .qh {
            width: 100%;
            height: 59px;
            padding: 0 0.4rem;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;

            button {
                width: 114px;
                height: 36px;
                border: none;
                outline: none;
                font-size: 15px;
                color: #616062;
                font-family: 'Adobe Heiti Std R';
                background: #dfdfdf;
                border-radius: 5px;
            }

            button:last {
                float: right;
            }

            #qhid0 {
                float: left;
            }

            #qhid1 {
                float: right;
            }

            .active {
                color: #fff;
                background: #ff9a30;
            }
        }
    }

    .box .card {
        background: #e4e4e4;
        height: 3rem;
        width: 92.5%;
        position: fixed;
    }

    .box main {
        overflow-y: scroll;
        width: 100%;
        height: auto;
        padding: 0 0.4rem;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        margin-bottom: 0.2rem;
    }

    .box main .main_top {
        margin-bottom: 0.1rem;

        .hyqy {
            font-weight: 800;
            font-size: 0.3rem;
            color: #333;
            margin-top: 0.4rem;
        }

        h3 {
            font-weight: 800;
            font-size: 0.3rem;
            line-height: 0.52rem;
            color: #333;
        }

        p {
            font-size: 0.24rem;
            line-height: 0.54rem;
            color: #999;
        }

        .btn {
            height: 0.6rem;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: space-between;
        }

        button {
            width: 1.56rem;
            height: 0.56rem;
            border: 1px solid #f2f2f2;
            outline: none;
            font-size: 0.24rem;
            line-height: 0.56rem;
            color: #666;
            border-radius: 5px;
            text-align: center;
            margin-top: 10px;
        }

        .org {
            background: #f93;
            color: #fff;
        }

        .profit {
            font-size: 0.24rem;
            line-height: 0.52rem;
            color: #999;
        }
    }

    .main_bottom h3 {
        font-size: 0.3rem;
        line-height: 0.52rem;
        font-weight: 800;
        color: #333;
    }

    p {
        font-size: 0.24rem;
        line-height: 0.52rem;
        color: #999;
    }

    .box .main {
        overflow-y: scroll;
        width: 100%;
        height: auto;
        padding: 0 0.4rem;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        margin-bottom: 0.2rem;

        .main_top {
            margin-bottom: 0.1rem;

            .hyqy {
                font-weight: 800;
                font-size: 0.3rem;
                color: #333;
                margin-top: 0.4rem;
            }

            h3 {
                font-weight: 800;
                font-size: 0.3rem;
                line-height: 0.52rem;
                color: #333;
            }

            p {
                font-size: 0.24rem;
                line-height: 0.54rem;
                color: #999;
            }

            .btn {
                height: 0.6rem;
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                justify-content: space-between;
            }

            button {
                width: 1.56rem;
                height: 0.56rem;
                border: 1px solid #f2f2f2;
                outline: none;
                font-size: 0.24rem;
                line-height: 0.56rem;
                color: #666;
                border-radius: 5px;
                text-align: center;
                margin-top: 10px;
            }

            .org {
                background: #f93;
                color: #fff;
            }

            .profit {
                font-size: 0.24rem;
                line-height: 0.52rem;
                color: #999;
            }
        }

        .main_bottom h3 {
            font-size: 0.3rem;
            line-height: 50px;
            font-weight: 800;
            color: #333;
        }

        p {
            font-size: 0.24rem;
            line-height: 0.52rem;
            color: #999;
        }
    }

    /* 立即支付 */
}

.gk_box {
    width: 100%;
    height: auto;

    ul {
        width: 100%;
        height: auto;
        padding: 0 12px;
        box-sizing: border-box;

        li {
            width: 100%;
            height: 2.38rem;
            padding: 10px 0;
            border-bottom: 0.02rem solid #f5f5f5;
            box-sizing: border-box;

            .left_img {
                float: left;
            }

            .right_text {
                float: left;
                font-size: 12px;
                color: #333;
                padding-left: 16px;
                box-sizing: border-box;

                .red {
                    color: #ff0052;
                    line-height: 20px;
                }
            }
        }
    }
}

footer {
    position: fixed;
    bottom: 0.98rem;
    width: 100%;
    height: 0.78rem;
    border-top: 1px solid #f2f2f2;
    text-align: center;
}

footer span {
    height: 100%;
    width: 25.4%;
    color: #ff9933;
    font-size: 0.2rem;
    display: inline-block;
    float: left;
    line-height: 0.78rem;
    background: #fff;
}

footer span b {
    font-size: 0.3rem;
    font-weight: 600;
}

footer .ljzf {
    float: left;
    width: 74.6%;
    height: 100%;
    border: none;
    outline: none;
    background: #f93;
    font-size: 0.24rem;
    color: #fff;
}
</style>